<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      智慧城市大气环境监测平台
    </div>
    <!-- 体部 -->
    <div class="content">
      <!-- 顶部统计卡片 -->
      <div class="stat-cards">
        <div class="stat-card device-total">
          设备总数
        </div>
        <div class="stat-card device-online">
          在线设备数
        </div>
        <div class="stat-card device-offline">
          离线设备数
        </div>
        <div class="stat-card project-total">
          工程总数
        </div>
        <div class="stat-card task-total">
          工单总数
        </div>
      </div>
      
      <!-- 上边占2份 -->
      <div class="top">
        <!-- 左侧部分 -->
        <div class="left">
          <!-- 地图区域 -->
          <div class="chart">
            <Map></Map>
          </div>
        </div>
        
        <!-- 中间部分 -->
        <div class="center">
          <!-- 设备状态饼图 -->
          <div class="chart">
            <C221></C221>
          </div>
          <!-- 监测数据趋势图 -->
          <div class="chart">
            <C222></C222>
          </div>
        </div>
        
        <!-- 右侧部分 -->
        <div class="right">
          <!-- 工程区域分布 -->
          <div class="chart">
            <C223></C223>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Map from './components/Map.vue'
import C221 from './components/C221.vue'
import C222 from './components/C222.vue'
import C223 from './components/C223.vue'


export default {

  components: {
    Map,
    C221,
    C222,
    C223,
  },
  data() {
    return {
      
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  background-image: linear-gradient(to right, #1a6fc9, #2a8ae5, #1a6fc9);
  background-size: 100% 100%;
  font-size: 28px;
  color: white;
  text-align: center;
  line-height: 60px;
  font-family: "楷体";
  font-weight: bold;
}

.content {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  

  .stat-cards {
    display: flex;
    padding: 10px;
    
    .stat-card {
      flex: 1;
      height: 120px;
      margin: 0 5px;
      border-radius: 4px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      
      &.device-total {
        background-color: #FFCC66;
      }
      
      &.device-online {
        background-color: #FFA07A;
      }
      
      &.device-offline {
        background-color: #FF7F7F;
      }
      
      &.project-total {
        background-color: #DC143C;
      }
      
      &.task-total {
        background-color: #9370DB;
      }
    }
  }
  
  .top {
    // 占父容器空间剩余部分
    flex: 1;
    display: flex;
    padding: 0 10px;
    
    // 组合选择器
    .left {
      flex: 2;
      margin-right: 10px;
      
      .chart {
        height: 100%;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      }
    }
    
    .center {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .chart {
        flex: 1;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .right {
      flex: 1;
      margin-left: 10px;
      
      .chart {
        height: 100%;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  // 给所有图表div设置内边距
  .chart {
    padding: 15px;
  }
}
</style>